<template>
  <div class="">
    <!-- 联系我们 -->
    <el-dialog
      title="联系商务"
      :visible.sync="centerDialogVisible"
      width="800px"
      append-to-body
      center
    >
      <div class="flex sw_box">
        <div class="item" v-for="(item,i) in list" :key="i">
          <div class="qrcode">
            <img :src="item.img" alt="">
          </div>
          <div class="name-box flex">
            <img src="../../assets/ConsignmentFourzero/home/logo.png" alt="">
            <div class="name">{{item.title}}</div>
          </div>
          <div class="txt">联系手机号：<span>{{item.des}}</span></div>
          <div class="txt">联系微信号：<span>{{item.remark}}</span></div>
        </div>
      </div>
      <div class="bot">
        <span style="color:#666">微信扫一扫上方二维码图案,</span> 添加商务好友详细了解
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { GetPcfnList } from "@/api/IntroductionPartners/index";
export default {
  data() {
    return {
      centerDialogVisible: false,
      list:[{
        bg:require('../../assets/img/xiaowang.png') ,
        name:'虞都互联-小王',
        tel:'15649949799',
        wx:'yudu9799'
      },
      {
        bg:require('../../assets/img/xiaotao.png') ,
        name:'小涛很闲',
        tel:'19139006222',
        wx:'yudu3518'
      },
      {
        bg:require('../../assets/img/pan.png'),
        name:'小辰',
        tel:'15225247351',
        wx:'XZbishr666666'
      },
    ]
    };
  },
  methods:{
    open() {
      
      this.centerDialogVisible = true
      this.getShangwuList()
    },
     // 获取商务
     async getShangwuList() {
      const res = await GetPcfnList({ type: 3 });
      this.list = res.rows;
     
    },
  }
};
</script>
  
  <style scoped lang="scss">

.sw_box{
  justify-content: space-around;
  .item{
    width: 225px;
    height: 314px;
    background-size: 100% 100%;
    background-image: url('../../assets/img/xiaowang.png');
    padding-top: 230px;
    padding-left: 15px;
    padding-right: 40px;
    position: relative;
    .qrcode{
      width: 183px;
      height: 183px;
      position: absolute;
      top: 22px;
      left: 20px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .name-box{
      align-items: center;
      
      img{
        width: 32px;
        height: 32px;
        background: #fff;
        border-radius: 4px;
        border: 1px solid #9eccff;
        margin-right: 7px;
      }
      .name{
        font-size: 16px;
        line-height: 17px;
      }
    }
    .txt{
        color: #999999;
        line-height: 18px;
        font-size: 12px;
        margin-top: 3px;
        span{
          color: #666;
        }
      }
  }
}
.bot{
  text-align: center;
  font-size: 16px;
  margin-top: 20px;
  color: #999;
}
</style>